<template lang="pug">
  Card
    Form(inline,:label-width='70')
      FormItem(label='关键字')
        Input(placeholder='关键字',v-model='sitName')
      FormItem(label='采集时间')
        DatePicker(type='datetime',format='yyyy-MM-dd HH:mm',:time-picker-options="{steps: [1, 60]}",style='width:300px',placeholder='测试')
      Button(type='primary',@click='handleCount') 查询
    .count-map
</template>

<script>
import echarts from 'echarts'
import asyncDatabase from '../api'

export default {
  name: 'DataBasseCount',
  data() {
    return {
      sitName: '',
      startTime: '',
      endTime: '',
      legendData: [],
      selectedData: {},
      xAxisData: [],
      seriesData: []
    }
  },
  mounted() {
    this.handleCount()
  },
  methods: {
    handleCount: async function() {
      try {
        const res = await asyncDatabase.count({ params: {} })
        this.legendData = res.data.data.map(item => item.siteName)
        this.xAxisData = Object.keys(res.data.data[0].pointMap)
          .sort()
          .map(item => {
            return this.$dayjs(Number(item))
              .format('YYYY-MM-DD HH:mm:ss')
              .replace(' ', '\n')
          })
        this.legendData.forEach((item, i) => (this.selectedData[item] = i < 5))
        this.seriesData = res.data.data.map(item => {
          return {
            name: item.siteName,
            type: 'line',
            data: Object.values(this.handleSortKey(item.pointMap))
          }
        })
        this.handleCharts()
      } catch (error) {}
    },
    handleSortKey(sortArr) {
      const newKey = Object.keys(sortArr).sort()
      const newObj = {}
      for (let i = 0, len = newKey.length; i < len; i++) {
        newObj[newKey[i]] = sortArr[newKey[i]]
      }
      return newObj
    },
    handleCharts() {
      let myCharts
      echarts.dispose(document.querySelector('.count-map'))
      myCharts = echarts.init(document.querySelector('.count-map'))
      myCharts.setOption({
        title: {
          text: '任务量',
          left: 'center'
        },
        grid: {
          top: 70,
          left: '4%',
          right: '13%',
          bottom: 80
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          selected: this.selectedData,
          data: this.legendData
        },
        xAxis: {
          name: '时间',
          type: 'category',
          axisLine: { onZero: false },
          boundaryGap: false,
          data: this.xAxisData
        },
        yAxis: {
          name: '采集数据量',
          type: 'value',
          minInterval: 1
        },
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 40,
            xAxisIndex: 0,
            filterMode: 'filter'
          }
        ],
        series: this.seriesData
      })
    }
  }
}
</script>

<style lang="scss">
.count {
  &-map {
    height: 500px;
  }
}
</style>